<template>
  <div class="register">
    <el-form ref="registerForm" :model="registerForm" :rules="registerFormRules">
      <el-form-item label="手机号" prop="phoneNumber" class="phonetext">
        <el-input v-model="registerForm.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="repass" class="codetext">
        <el-input v-model="registerForm.repass"></el-input>
        <el-button class="send-code-btn" :disabled="countdown > 0" @click="sendCode">
          {{ countdown > 0 ? countdown + 's' : '发送验证码' }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "Register",
  data() {

    return {
      registerForm: {
        phoneNumber: '',
        repass: ''
      },
      countdown: 0,
      timer: null,
      registerFormRules: {
        phoneNumber: [
          {required: true, message: "手机号必填", trigger: "blur"},
          {min: 11, max: 11, message: "手机号格式错误,请检查!", trigger: "blur"}
        ],
        repass: [
          {required: true, message: "验证码必填", trigger: "blur"},
          {min: 6, max: 6, message: "验证码格式错误,请检查!", trigger: "blur"}
        ]
      }
    }
  },
  methods: {
    sendCode() {

      // 发送验证码的逻辑
      if (!this.registerForm.phoneNumber) {
        this.$message.error('请输入手机号')
        return
      }
      // 发送验证码的异步请求
      // ...
      // 设置倒计时
      this.$axios.postForm("/userinfo/getCode", this.registerForm)
          .then(reponse => {
            if (reponse.data.code == 200) {

              this.$message({
                message: "发送成功",
                type: "success",
                duration: 2000,
              })
            } else {
              this.$message({
                message: reponse.data.msg,
                type: "error",
                duration: 2000,
              })
            }
          })
      this.countdown = 60
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--
        } else {
          clearInterval(this.timer)
          this.timer = null
        }
      }, 1000)
    },
    submitForm() {
      this.$refs.registerForm.validate((validate) => {
        console.log(this.registerForm)

        if (!validate) {
          this.$message({
            message: "请正确填写表单",
            type: "error",
            duration: 2000,
          })
          return;
        }
        //请求后端接口进行校验
        // 第一个 url地址    第二个  请求参数
        console.log(this.registerForm.phoneNumber)
        console.log(this.registerForm.repass)
        this.$axios.post("/userinfo/register", this.registerForm)
            .then(reponse => {

              if (reponse.data.code == 200) {

                this.$message({
                  message: "注册成功,正在为您转跳主页",
                  type: "success",
                  duration: 2000,
                })
                console.log(this.registerForm.phoneNumber)
                this.$axios.postForm("/userinfo/registerReleaseToken",{phoneNumber:this.registerForm.phoneNumber}).then(res => {
                  console.log(res)
                  document.cookie = "user = "+res.data.data;
                  this.$router.push("/")
                })
              } else if (reponse.data.code == 403) {
                this.$message({
                  message: reponse.data.msg,
                  type: "success",
                  duration: 2000,
                })
                this.$axios.postForm("/userinfo/registerReleaseToken",{phoneNumber:this.registerForm.phoneNumber}).then(res => {
                  console.log(res)
                  document.cookie = "user = "+res.data.data;
                  this.$router.push("/")
                })
              }else {
                this.$message({
                  message: reponse.data.msg,
                  type: "error",
                  duration: 2000,
                })
              }
            })

      })

    },

  }
}
</script>

<style lang="less" scoped>
.register {
  border: 1px solid;
  text-align: center;
  width: 50%;
  height: 400px;
  margin: 0 auto;
}

.phonetext {
  width: 30%;
  margin-left: 35%;
  padding-top: 5%;
}

.codetext {
  margin-left: 35%;
  width: 30%;
}

</style>